<ui:composition xmlns="http://www.w3.org/1999/xhtml"
				xmlns:h="http://java.sun.com/jsf/html"
		      	xmlns:f="http://java.sun.com/jsf/core"
		      	xmlns:ui="http://java.sun.com/jsf/facelets"
		      	xmlns:p="http://primefaces.org/ui"> 
		
				<p:panel styleClass="center width">
					<f:facet name="header">Tabla de socios potenciales</f:facet>
					
					<p:dataTable id="dataTable1" var="car" value="#{tableBean.carsSmall}" widgetVar="carsTable" emptyMessage="No cars found with given criteria">            	
						<f:facet name="header">
						<p:panelGrid columns="4" styleClass="noborder">
						    <h:outputText value="Buscar:" styleClass="rigth"/>
						    <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="margin-left:10px;" styleClass="width_input left" />
						    <p:calendar  showOn="button" styleClass="rigth"></p:calendar>
						    <p:calendar  showOn="button" styleClass="left"></p:calendar>
						</p:panelGrid>
						</f:facet>
						<p:column id="nro" filterBy="#{car.model}" headerText="N°" footerText="" filterMatchMode="contains">
						    <h:outputText value="#{car.model}" />
						</p:column>
						<p:column id="nombres" filterBy="#{car.year}" headerText="Nombres" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="consulta" filterBy="#{car.year}" headerText="Consulta" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="socio" headerText="Socio" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="credito" headerText="Credito" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="plazo" headerText="Plazo" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="joven" headerText="Joven" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="peque" headerText="Peque" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="ahorro" headerText="Ahorro" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="observacion" headerText="Observación" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="cooperativa" filterBy="#{car.manufacturer}" headerText="Cooperativa" footerText="" filterOptions="#{tableBean.manufacturerOptions}" filterMatchMode="exact">
						    <h:outputText value="#{car.manufacturer}" />
						</p:column>
						<p:column id="fecha" headerText="Fecha" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
				</p:dataTable>
				
				
				<br/>
				<p:commandButton value="Graficar"></p:commandButton>
				<br/>
				
				<ui:include src="/reportes/chartPie.xhtml" />
				
				<br/>
				
				<p:panelGrid columns="3" styleClass="noborder center" style="width:500px;">
					<p:commandButton value="Imprimir Tabla"></p:commandButton>
					<p:commandButton value="Imprimir Gráfico"></p:commandButton>
					<p:commandButton value="Imprimir Tabla y Gráfico"></p:commandButton>
				</p:panelGrid>
				
				</p:panel>
</ui:composition>